<template>
          <div class="seat-selection">
    <div class="stage">一楼座位示意图</div>
    <div class="seats">
      <div v-for="(row, rowIndex) in alltabledata" :key="rowIndex" class="row">
        <div
          v-for="(seat, seatIndex) in row"
          :key="seatIndex"
          :class="['seat', seatClass(seat)]"
          @click="selectSeat(rowIndex, seatIndex)"
        >
          {{ seat.type }}
        </div>
      </div>
    </div>
  </div>
  </template>
  
  <script>
  export default {
    name:'newdemo',
    data() {
      return {
        test:[{
            "number": "3",
            "seat_row": "1",
            "seat_column": "9",
            "type": "380",
        },
        {
            "number": "2",
            "seat_row": "2",
            "seat_column": "9",
            "type": "380",
        }],

      selectedSeats: [],

      alltabledata:[]
      };
    },
    watch: {
    },
    mounted(){
        // 创建一个包含横竖各十行的二维数组
const gridArray = [];

// 循环创建十行
for (let i = 0; i < 30; i++) {
  // 创建当前行的数组
  const row = [];

  // 循环创建十个对象，并将它们添加到当前行数组中
  for (let j = 0; j < 53; j++) {
    row.push({ number: '', type: '00', status: 'occupied' });
  }

  // 将当前行数组添加到二维数组中
  gridArray.push(row);
  this.alltabledata = gridArray

  // 假设你从后端接收到的对象数组
const seatsFromBackend = [
  {
    "number": "3",
    "seat_row": "1",
    "seat_column": "9",
    "type": "380",
  },
  {
    "number": "2",
    "seat_row": "2",
    "seat_column": "9",
    "type": "380",
  }
];
// this.test = JSON.parse(JSON.stringify(seatsFromBackend))
let aa = JSON.parse(JSON.stringify(seatsFromBackend))
for(var i = 0;i<aa.length;i++){
    console.log(aa[i])
}

// // 将从后端接收到的对象放置到正确的位置
// seatsFromBackend.forEach(seat => {
//   const rowIndex = parseInt(seat.seat_row) - 1; // 将座位行数转换为数组的行索引
//   const colIndex = parseInt(seat.seat_column) - 1; // 将座位列数转换为数组的列索引
//   const index = rowIndex * 10 + colIndex; // 根据公式计算索引位置
//   if (index >= 0 && index < gridArray.length) {
//     this.alltabledata[index] = seat;
//   }
// });

// 输出包含座位对象的数组
}

// 输出二维数组
    },
    methods: {
        seatClass(seat) {
      return {
        'seat-available': seat.status === 'available',
        'seat-occupied': seat.status === 'occupied',
        'seat-selected': this.selectedSeats.includes(seat),
        'seat-00': seat.type === '00',
        'seat-380': seat.type === '380',
        'seat-280': seat.type === '280',
        'seat-room': seat.type === 'room',
        'seat-worker': seat.type === 'worker',
        'seat-el-worker': seat.type === 'el-worker',
        'seat-camera': seat.type === 'camera',
      };
    },
    selectSeat(rowIndex, seatIndex) {
      const seat = this.seatingPlan[rowIndex][seatIndex];
      if (seat.status === 'available') {
        seat.status = 'selected';
        this.selectedSeats.push(seat);
      } else if (seat.status === 'selected') {
        seat.status = 'available';
        this.selectedSeats = this.selectedSeats.filter((s) => s !== seat);
      }
    },
    },
  };
  </script>
  
  <style lang="stylus" scoped>
  .upload-box {
    position: relative;
    display: flex;
    align-items center
    justify-content center
    width: 58px;
    height: 58px;
    border: 1px dashed #c0ccda;
    border-radius: 4px;
    //box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    text-align: center;
    line-height: 58px;
    cursor: pointer;
  
    + .upload-box {
      margin-left: 10px;
    }
  
    .ivu-icon {
      vertical-align: middle;
      font-size: 20px;
    }
  
    .image {
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  
    .btn {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 14px
      transform: translate(50%, -50%);
    }
  } .df-aic{
    display flex
    flex-wrap: wrap
  }
    .w414{
      width:414px;
    }
    .seat {
        width: 20px;
        height: 20px;
        margin: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size:12px;
      }
      .seat-00 {
        background: #F0F2F5;
      }
      .seat-380 {
        background: #DA9694;
      }
      .seat-280 {
        background: #FABF8F;
      }
      .seat-worker {
        background: #FFFF00;
      }
      .seat-room{
        background: #B1A0C7;
      }
      .seat-el-worker {
        background: #92D050;
      }
      .seat-camera {
        background: blue;
      }
      .seat-selected {
        background-color:#282C34;
        color:#fff;
      }
      .row {
        display: flex;
      }
      .seat-selection {
        text-align: center;
      }
      .stage {
        background: #ccc;
        padding: 10px;
        margin-bottom: 20px;
      }
      .seats {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
  </style>
  